<template>
  <div style="margin-top: 10px">
    <el-row :gutter="20">
      <el-col :span="type !== 1 ? 5 : 4">
        <div class="text-center">学校名称</div>
      </el-col>
      <el-col :span="4">
        <div class="text-center">基地名称</div>
      </el-col>
      <el-col :span="type !== 1 ? 3 : 4">
        <div class="text-center">投入方向</div>
      </el-col>
      <el-col :span="type !== 1 ? 3 : 4">
        <div class="text-center">金额（万元）</div>
      </el-col>
      <el-col :span="type !== 1 ? 3 : 4">
        <div class="text-center">对接人</div>
      </el-col>
      <el-col :span="type !== 1 ? 3 : 4">
        <div class="text-center">决策人</div>
      </el-col>
      <el-col :span="3" v-if="type !== 1">
        <div class="text-center"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-for="(item, ind) in list" :key="ind" style="margin-top: 4px">
      <el-col :span="type !== 1 ? 5 : 4">
        <div class="text-center">
          <el-input size="mini" :readonly="type === 1" v-model.trim="item.schoolName"/>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="text-center">
          <el-input size="mini" :readonly="type === 1" v-model.trim="item.baseName"/>
        </div>
      </el-col>
      <el-col :span="type !== 1 ? 3 : 4">
        <div class="text-center">
          <el-input size="mini" :readonly="type === 1" v-model.trim="item.direction"/>
        </div>
      </el-col>
      <el-col :span="type !== 1 ? 3 : 4">
        <div class="text-center">
          <el-input size="mini" :readonly="type === 1" v-model.trim="item.amount" type="number" :min="0" @input="(e) => inputHandler(e, ind)">
          </el-input>
        </div>
      </el-col>
      <el-col :span="type !== 1 ? 3 : 4">
        <div class="text-center">
          <el-input size="mini" :readonly="type === 1" v-model.trim="item.contactPerson"/>
        </div>
      </el-col>
      <el-col :span="type !== 1 ? 3 : 4">
        <div class="text-center">
          <el-input size="mini" :readonly="type === 1" v-model.trim="item.decisionPerson"/>
        </div>
      </el-col>
      <el-col :span="3" v-if="type !== 1">
        <div class="text-center">
          <el-button type="primary" icon="el-icon-plus" plain circle @click="addMarket"></el-button>
          <el-button type="danger" v-if="ind >= 1" icon="el-icon-minus" plain circle @click="removeMarket(item, ind)"></el-button>
          <div v-else style="display: inline-block;width: 36px;height: 23px;margin-left: 10px;line-height: 1"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {addDataApi, deleteDataApi, getDataListApi, updateDataApi} from "@/api/crm/sa/plan/detail";

export default {
  name: "MultiAgentTable",
  data() {
    return {
      list: []
    }
  },
  props: {
    tableData: {
      type: Array,
      required: true
    },
    type: {
      type: Number,
      default: 1
    }
  },
  watch: {
    tableData: {
      deep: true,
      immediate: true,
      handler(newV) {
        this.list = newV
      }
    }
  },
  methods: {
    // 用户输入的回调
    inputHandler(e, index) {
      if (+e < 0) this.tableData[index].amount = 0
    },
    addMarket() {
      const flag = this.list[0]?.flag ?? 1
      const planId = this.list[0]?.planId ?? null

      this.list.push({
        amount: null,
        baseName: "",
        contactPerson: "",
        createBy: this.$store.state.user.nickName,
        createTime: "",
        decisionPerson: "",
        deptId: null,
        direction: "",
        flag: flag,
        id: null,
        planId,
        remark: "",
        schoolName: "",
        updateBy: this.$store.state.user.nickName,
        updateTime: null,
        userId: this.$store.state.user.id,
      })

      this.$emit('update:tableData', this.list)
    },
    async removeMarket(row, index) {
      const res = await deleteDataApi([{
        id: row.id,
        type: 2
      }])
      if(res.code === 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.list.splice(index, 1)
        this.$emit('update:tableData', this.list)
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    },
  }
}
</script>

<style scoped lang="scss">

</style>
